    /*
   面向对象选项卡
   1.抽象内容
   = 属性 btns
   = 属性 tabs
   = 方法 能实现点击事件切换的方法

   2.书写构造函数
   =接受一个参数: 范围元素

   3.在方法里面实现选项卡
   =循环绑定事件以后，this指向不在是实例
   => 拿不到btns、tabs
   => 解决方法：
   =1.提前保存 this 为一个变量
   =2.使用箭头函数  它没有this 
   */
   function Tabs(ele,options){
    // 拿到出现选项卡的范围
    this.ele = document.querySelector(ele)
    //找到 btns
    this.btns = this.ele.querySelectorAll('ul>li')
    //找到 tabs
    this.tabs = this.ele.querySelectorAll('ol>li')
    //❤添加新的属性
  //  ❤ this.options = options
    //这里的this就是当前实例
    //用当前实例调用方法
    this.change()

}
Tabs.prototype.change = function (){
    //这个位置this是当前实例
  //   let _this = this
    //从现在开始_this 、 this 都是当前实例


  //   console.log('实现给 btn 的每一个添加鼠标移动事件');
  //操作的是当前实例的 btns、tabs
  //this 就是当前实例，给this.btns添加点击事件
  this.btns.forEach((item,index) => {
      item.addEventListener('mouseover',()=>{
          //操作当前实例的 btns、tabs每一个类名
          //this  事件源 就是现在点击的li
          // console.log(this);
          //当你访问_this的时候,访问提前保存的this
          // console.log('_this',_this);
          // console.log(item);
          //this.btns 和 this.tabs 里面的每一个都没有类名
          this.btns.forEach((t,i) => {
              t.className = ''
              this.tabs[i].className = ''

          })
          // 给对应的添加类名
          item.className = 'active'
          this.tabs[index].className = 'active'
      })
  })
}

export default Tabs;
// new Tabs('.box',  {type:'mouseover'})
// new Tabs('.box2')
// ❤  let obj = new Tabs('.box',{type:'mouseover'})
//只要依靠实例调用一下 change 方法，选项卡就能实现
//   obj.change()
//  ❤ console.log(obj);
